<template>
  <v-row align="center">
    <v-col cols="12" md="6" sm="8">
      <div class="">
        <div :class="{animate__fadeInUp: inAnimation}" class="text-h2 text-md-h1 animate__animated animate__slow"
             @animationend="inAnimation=false">{{ banner.title }}
        </div>
        <div :class="{animate__fadeInUp: inAnimation}" class="text-body-1 mt-2 animate__animated animate__slow">{{
            banner.desc
          }}
        </div>
        <!--        <div class="indecation">-->
        <!--        <span-->
        <!--            v-for="i in list?.length"-->
        <!--            :key="i"-->
        <!--            :class="{ current: currentIndex === i - 1 }"-->
        <!--            class="indecation-item"-->
        <!--            @click="switchBanner(i - 1)"-->
        <!--        ></span>-->
        <!--        </div>-->
      </div>
    </v-col>

    <v-col class="d-none d-md-block" cols="12" md="6" sm="4">

      <div class="banner-img">
        <img src="@/static/img/layout/home_banner.png"/>
      </div>
    </v-col>
  </v-row>

  <div class="d-flex justify-center mt-16">
    <v-btn class="signup" x-large @click="login=true">
      立即登录
    </v-btn>
  </div>

  <login-dialog v-model="login"/>
</template>

<script lang="ts">
import {computed, defineComponent, onMounted, onUnmounted, reactive, toRefs} from 'vue'
import LoginDialog from "@/components/login/Index.vue";


export default defineComponent({
  name: 'Banner',
  components: {LoginDialog},
  props: {
    list: {
      type: Array,
      default: [],
      require: true
    }
  },
  setup(props) {
    const state = reactive({
      inAnimation: true,
      currentIndex: 0,
      banner: <any>{},
      login: false
    })

    state.banner = computed(() => props.list[state.currentIndex])

    let timer: number | undefined

    function startBanner() {
      timer = setInterval(function () {
        if (state.currentIndex === (props.list.length - 1)) {
          state.currentIndex = 0
        } else {
          state.currentIndex++
        }
        state.inAnimation = true
      }, 5000)
    }


    function switchBanner(index: number) {
      clearInterval(timer)
      state.inAnimation = true
      state.currentIndex = index
      startBanner()
    }

    onMounted(() => {
      startBanner()
    })

    onUnmounted(() => clearInterval(timer))


    function onLogin() {

    }

    return {
      ...toRefs(state),
      onLogin,
      switchBanner
    }
  }
})
</script>

<style lang="scss" scoped>
.signup {
  cursor: pointer;
  width: 300px;
  height: 50px !important;
  background: #7668cb;
  border: 1px solid #4f5175;
  border-radius: 8px;
  color: #fff;
  font-size: 1.36rem;
  text-align: center;
  line-height: 4rem;
}
</style>
